<template>
  <div>

    <!-- 当前位置 -->
    <div>
      <br />
      <el-breadcrumb separator-class="el-icon-arrow-right" id="one">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>当前位置</el-breadcrumb-item>
        <el-breadcrumb-item>养老服务管理系统</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>养老服务机构</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <br />
    <!-- 当前位置 -->


    <!-- 搜索框 -->
    <div id="sousuokuang">
      <div id="sousuobeijing"></div>
      <br />
      <div style="color:#990707">搜索条件</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="统计年:">
          <el-select v-model="formInline.tongjinian" placeholder="-全部-">
            <el-option label="-全部-" value=""></el-option>
            <el-option label="2005" value="2005"></el-option>
            <el-option label="2010" value="2010"></el-option>
            <el-option label="2015" value="2015"></el-option>
            <el-option label="2022" value="2022"></el-option>
          </el-select>
        </el-form-item>



        <!-- <el-button type="text" >打开嵌套表格的 Dialog</el-button> -->

        <el-form-item label="行政区划:">
          <el-button type="success" @click="dialogTableVisible = true">选择</el-button>

          <el-dialog title="选择行政区划" :visible.sync="dialogTableVisible">
  
    <el-cascader
    v-model="zuihouzhi"
    :options="options" :show-all-levels="false"></el-cascader>
  
</el-dialog>
        </el-form-item>

       
        
        



        &nbsp;&nbsp;
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索框 -->

    <!-- <el-button type="primary" icon="el-icon-search" @click="ceshi()">测试</el-button> -->

<!-- 导入导出按钮 -->
    <div id="daorudaochu">
      <el-button type="success">
      <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          header="服务机构列表"
          name="服务机构列表.xls"
        >导出
        <i class="el-icon-upload el-icon--right"></i>
       
      </download-excel>
    </el-button>
      <el-button  :plain="true" @click="open2" type="primary">打印<i class="el-icon-upload el-icon--right"></i></el-button>
      
    </div>

<!-- 导入导出按钮 -->

    <!-- 表格 -->
    
    <div id="biaoge">

      <el-table :data="tableData" style="width: 100%" id="memechuai">

        <el-table-column
        label="序号"
      type="index"
      width="50"
      
      >
    </el-table-column>
    
    <el-table-column prop="administrativeDivision" label="行政区划" width="210">
                            <template slot-scope="scope">
                                {{sdaa(scope.row.administrativeDivision)}}
                            </template>
                        </el-table-column>
        <el-table-column label="养老服务机构">
          <el-table-column prop="jigouName" label="机构名称" width="120">
          </el-table-column>
          <el-table-column label="公办养老机构（所）">
            <!-- <el-table-column prop="yanglaoyuanShuliang" label="养老院" width="90">
            </el-table-column>
            <el-table-column prop="yanghuyuanShuliang" label="养护楼" width="90">
            </el-table-column> -->
            <el-table-column prop="xianshijiJinglaoyuan" label="县市级中心敬老院" width="170">
            </el-table-column>
            <el-table-column prop="xiangzhenjiJinglaoyuan" label="乡镇敬老院" width="170">
            </el-table-column>
          </el-table-column>
          <el-table-column label="民办养老机构（所）">
          <el-table-column prop="minban_yanglaojigouyinglixing" label="盈利性养老机构" width="200">
            </el-table-column>
            <el-table-column prop="minban_yanglaojigoufeiyinglixing" label="非盈利性养老机构" width="200">
            </el-table-column>
        </el-table-column>
        </el-table-column>
      
        
      </el-table>

    </div>
    <!-- 表格 -->

  </div>
</template>



<script>
import axios from 'axios'
import JsonExcel from "vue-json-excel";
import {regionData,CodeToText} from "element-china-area-data";

export default {
  components: {
    DownloadExcel: JsonExcel,
  },
  data() {
    return {
      jsonFields:{
              '区划名称': 'administrativeDivision',
              '机构名称': 'jigouName',
              '县市级中心敬老院': 'xianshijiJinglaoyuan',
              '乡镇敬老院': 'xiangzhenjiJinglaoyuan',
              '盈利性养老机构': 'minban_yanglaojigouyinglixing',
              '非盈利性养老机构': 'minban_yanglaojigoufeiyinglixing',
      },
      formInline:{tongjinian:'',xingzhengquhua:'',suibian:'abc'},
      jiequzhishuzu:[],
      jiequzifuchuan:'',
      zuihouzhi:[],
      options: [{
          value: '新疆维吾尔自治区',
          label: '新疆维吾尔自治区',
          children: [{
            value: '乌鲁木齐市',
            label: '乌鲁木齐市',
            children: [{
              value: '天山区',
              label: '天山区'
            }, {
              value: '达坂城区',
              label: '达坂城区'
            }, {
              value: '乌鲁木齐县',
              label: '乌鲁木齐县'
            }, {
              value: '新市区',
              label: '新市区'
            }, {
              value: '天山区',
              label: '天山区'
            }, {
              value: '米东区',
              label: '米东区'
            }]
          }, {
            value: '吐鲁番地区',
            label: '吐鲁番地区',
            children: [{
              value: '吐鲁番市',
              label: '吐鲁番市'
            }, {
              value: '鄯善县',
              label: '鄯善县'
            }, {
              value: '托克逊县',
              label: '托克逊县'
            }]
          },{
            value: '哈密地区',
            label: '哈密地区',
            children: [{
              value: '哈密市',
              label: '哈密市'
            }, {
              value: '巴里坤哈萨克自治区',
              label: '巴里坤哈萨克自治区'
            }, {
              value: '伊吾县',
              label: '伊吾县'
            }]
          },{
            value: '阿克苏地区',
            label: '阿克苏地区',
            children: [{
              value: '阿克苏市',
              label: '阿克苏市'
            }, {
              value: 'dingbudaohang',
              label: '温宿县'
            }, {
              value: '库车县',
              label: '库车县'
            }, {
              value: '沙雅县',
              label: '沙雅县'
            }]
          },{
            value: '克拉玛依市',
            label: '克拉玛依市',
            children: [{
              value: '独山子区',
              label: '独山子区'
            }, {
              value: '克拉玛依区',
              label: '克拉玛依区'
            }, {
              value: '白碱滩区',
              label: '白碱滩区'
            }, {
              value: '乌尔禾区',
              label: '乌尔禾区'
            }]
          },{
            value: '昌吉回族自治区',
            label: '昌吉回族自治区',
            children: [{
              value: '昌吉市',
              label: '昌吉市'
            }, {
              value: '阜康区',
              label: '阜康区'
            }, {
              value: '呼图壁县',
              label: '呼图壁县'
            }, {
              value: '玛纳斯县',
              label: '玛纳斯县'
            }, {
              value: '奇台县',
              label: '奇台县'
            }, {
              value: '吉木萨尔县',
              label: '吉木萨尔县'
            }, {
              value: '木垒哈萨克自治县',
              label: '木垒哈萨克自治县'
            }]
          }]
        }],
      dialogTableVisible: false,
      tableData: [{}]
    }
  },
  methods: {
    // <!-- /chain-api/back/info/login -->
    chaxunOne(){
      if(this.zuihouzhi[1]==null){
        // this.formInline.xingzhengquhua=this.zuihouzhi[1];
        this.formInline.xingzhengquhua='';
      }else{
        this.formInline.xingzhengquhua=this.zuihouzhi[1];




        
      }
      
      axios.post("/chain-api/yanglaofuwujigou/one",this.formInline).then(res=>{
            if(res.data.message=='成功'){
              this.tableData=res.data.data;
              console.log("注意下下下");
              console.log(res.data.data);
            }
      })
    },
    onSubmit() {
      this.chaxunOne();
    },
    open2() {
        this.$message({
          showClose: true,
          message: '🙂',
          type: 'success'
        });
      },
    ceshi(){
     
      // this.jiequzhishuzu=this.zuihouzhi.split(',');
      // alert(this.jiequzhishuzu[2]);
      this.jiequzifuchuan=this.zuihouzhi[1];
      console.log(this.jiequzifuchuan);
      // console.log("looklookme:"+this.zuihouzhi.split(','));
     
      // this.jiequzhishuzu="你好,我好,大家好".split(",");
      // console.log("looklookmetwo:"+this.jiequzhishuzu);
    },
    sdaa(value){
            let arr=[];
            let addd=[];
            arr=(value||"").split(',')
            for(let i=0;i<arr.length;i++){
                if(arr[i]!==undefined&&arr[i]!==''){
                    addd.push(arr[i]);
                }
            }
            if(addd[1]!=null&&addd[2]!=null){
                var dz=CodeToText[addd[0]]+CodeToText[addd[1]]+CodeToText[addd[2]]
            }else{
                if(addd[1]!=null){
                    dz=CodeToText[addd[0]]+CodeToText[addd[1]]
                }else{
                    dz=CodeToText[addd[0]]
                }
            }
            return dz;
        }
  },
  mounted(){
    this.chaxunOne();
  }
}
</script>

<style scope>
#one {
  width: 36%;
  background-color: rgb(231, 156, 15);
  position: absolute;
  left: 220px;
}

#sousuokuang {
  width: 50%;
  position: absolute;
  left: 270px;
  top: 150px;
}
#biaoge{
  position: absolute;
  left: 240px;
  top: 300px;
}
#sousuobeijing{
  background-color: rgb(149, 182, 131);
  width: 100%;
  height: 70%;
  position: absolute;
  left: -10px;
  top: 16px;
  opacity: 0.3;
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #990707;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
#daorudaochu{
  position: absolute;
  left: 250px;
  top: 250px;
}
.el-cascader-menu {
  color: #224b9d;
}
.el-cascader:not(.is-disabled):hover .el-input__inner {
  cursor: pointer;
  border-color: #55E116;
}
#memechuai{
  height: 300px;
  overflow: auto;
}

</style>